<ng-container *ngIf="!creator.isCreatorDisposed">
  <sv-ng-modal-container></sv-ng-modal-container>
  <div [class]="creator.getRootCss()" [attr.style]="themeVariablesString" #container>
    <div>
      <sv-svg-bundle></sv-svg-bundle>
    </div>
    <div class="svc-full-container svc-creator__area svc-flex-column"
      [class.svc-creator__area--with-banner]="!creator.haveCommercialLicense">
      <div class="svc-flex-row svc-full-container"
        [class.svc-creator__side-bar--left]="creator.sidebarLocation == 'left'">
        <div class="svc-flex-column svc-flex-row__element svc-flex-row__element--growing">
          <div class="svc-top-bar">
            <div class="svc-tabbed-menu-wrapper" [visible]="creator.showTabs">
              <svc-tabbed-menu [model]="creator.tabbedMenu"></svc-tabbed-menu>
            </div>
            <div *ngIf="creator.showToolbar" class="svc-toolbar-wrapper" [visible]="creator.showToolbar">
              <sv-action-bar [model]="creator.toolbar"></sv-action-bar>
            </div>
          </div>
          <div class="svc-creator__content-wrapper svc-flex-row"
            [class.svc-creator__content-wrapper--footer-toolbar]="creator.isMobileView">
            <div class="svc-creator__content-holder svc-flex-column">
              <ng-container *ngFor="let tab of visibleTabs; trackBy: trackTabBy">
                <div role="tabpanel" class="svc-creator-tab" [attr.id]="'scrollableDiv-' + tab.id"
                  [attr.aria-labelledby]="'tab-' + tab.id"
                  [class.svc-creator__toolbox--right]="creator.toolboxLocation == 'right'">
                  <ng-template
                    [component]="{ name: tab.componentContent, data: { data: creator, model: tab.data.model } }"></ng-template>
                </div>
              </ng-container>
            </div>
          </div>
          <div *ngIf="creator.isMobileView" class="svc-footer-bar">
            <div class="svc-toolbar-wrapper" [visible]="creator.isMobileView">
              <sv-action-bar [model]="creator.footerToolbar"></sv-action-bar>
            </div>
          </div>
        </div>
        <svc-side-bar [model]="creator.sidebar" *ngIf="creator.isSidebarVisible"></svc-side-bar>
      </div>
      <div class="svc-creator__banner" *ngIf="!creator.haveCommercialLicense">
        <span class="svc-creator__non-commercial-text" [innerHTML]="creator.licenseText | safeHtml"></span>
      </div>
      <sv-notifier [notifier]="creator.notifier"></sv-notifier>
    </div>
  </div>
</ng-container>